

.itemTemplate { /* Master div with description AND content to fill with text and stuff */
	width: 100%;
	background-color: transparent;
	display: block;
	margin-bottom: 20px;
	margin-top: 20px;
}

/****************** HEADER OF TEMPLATES *************************/
.descriptionTemplate{ /* Description header*/
	background-color: rgb(230, 240, 230);
	display: block;
	border-radius: 15px;
	border: 2px rgb(100, 140, 100) double;
	padding: 0px 10px 0px 10px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
	z-index: 20;
	position: relative;
	opacity: 1;
	overflow: hidden;
	
}

.descriptionTemplate:hover{
	cursor: pointer;
	background-color: rgb(200, 220, 200);
	opacity: 1;
}

.descriptionTemplate.selectedBox{
	background-color: rgb(200, 240, 200);
}

.descriptionTemplate.selectedBox:hover{
	cursor: auto;
}

.descriptionTemplate.notselectedBox{
	opacity: 0.3;
	
	transition-property: opacity;
	transition-duration: 0.25s;
	-moz-transition-property: opacity; /* Firefox 4 */
	-moz-transition-duration: 0.25s; /* Firefox 4 */
	-webkit-transition-property: opacity; /* Safari and Chrome */
	-webkit-transition-duration: 0.25s; /* Safari and Chrome */
	-o-transition-property: opacity; /* Opera */
	-o-transition-duration: 0.25s; /* Opera */
}

.descriptionTemplate.notselectedBox:hover{
	cursor: pointer;
	opacity: 1;
}

.descriptionTemplate img{
	float: right;
	margin: -55px 0px 10px 10px;
	border-radius: 5px;
	border: 2px solid rgb(100, 120, 100);
}

.descriptionTemplate p{
	font-style: italic;
	color: #333;
	text-align:justify;
}

/****************** CONTENT OF TEMPLATES *************************/

.contentTemplate{ /* Content to fill with text and stuff */
	background-color: transparent;
	display: none;
	padding: 25px 10px 30px 10px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5) inset;
	margin-top: -15px;
	border: 2px solid rgb(90, 120, 90);
}

